<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>

import * as echarts from 'echarts'


export default {
  name: "nine",
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '1500px'
    },
    height: {
      type: String,
      default: '750px'
    }
  },
  data() {
    return {
      chart: null,
      option: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      setTimeout(() => {
        this.option = {
          title: {
            show: true,
            text: "银行机构客户信息核查统计",
            left: "left",
            top: "1%",
            textStyle: {
              fontSize: 18,
              color: "#293C55",
              fontStyle: "normal",
              fontWeight: "normal"
            }
          },
          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          dataset: {
            source: [
              ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
              ['发起实时核查请求数量', 1000, 2000, 3000, 4000, 5000, 6000],
              ['实时核查结果反馈数量', 2000, 3000, 4000, 5000, 6000, 7000],
              ['发起批量核查请求数量', 3000, 4000, 5000, 6000, 7000, 8000],
              ['批量核查结果反馈数量', 4000, 5000, 6000, 7000, 8000, 9000],
              ['可疑线索报送数量', 5000, 6000, 7000, 8000, 9000, 10000],
              ['可疑线索撤销数量', 6000, 7000, 8000, 9000, 10000, 11000]
            ]
          },
          xAxis: {type: 'category'},
          yAxis: {gridIndex: 0},
          grid: {top: '55%'},
          series: [
            {
              type: 'line',
              symbol: 'none',
              seriesLayoutBy: 'row',
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                  return params.value[2];
                },
                color: '#fff',
              },
              lineStyle: {
                width: 4
              },
              labelLayout: {
                moveOverlap: 'shiftX'
              },
              emphasis: {
                focus: 'series'
              },
              areaStyle: {
                opacity: 0.3,
              },
            },
            {
              type: 'line',
              symbol: 'none',
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'line',
              symbol: 'none',
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'line',
              symbol: 'none',
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'line',
              symbol: 'none',
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'line',
              symbol: 'none',
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '25%'],
              emphasis: {
                focus: 'self'
              },
              label: {
                formatter: '{b}: {@2012} ({d}%)'
              },
              encode: {
                itemName: 'product',
                value: '2012',
                tooltip: '2012'
              }
            }
          ]
        }
        this.chart.on('updateAxisPointer', (event) => {
          const xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            this.chart.setOption({
              series: {
                id: 'pie',
                label: {
                  formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                  value: dimension,
                  tooltip: dimension
                }
              }
            })
          }
        })
        this.chart.setOption(this.option)
      })
    }
  }
}
</script>

<style scoped>

</style>
